<script setup lang="ts">

import {EditPen, House, Lock, Setting} from "@element-plus/icons-vue";
</script>

<template>
  <el-container style="height: 100vh">
    <el-header style="padding: 0">
      <el-menu
          :default-active="1"
          mode="horizontal"
      >
        <el-menu-item index="1">楽哈论坛</el-menu-item>
      </el-menu>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
            style="height: 100%"
            default-active="2"
            class="el-menu-vertical-demo"
            router
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon><EditPen /></el-icon>
              <span>帖子管理</span>
            </template>
            <el-menu-item index="/manager/posts">帖子列表</el-menu-item>
            <el-menu-item index="/manager/posts/editor">发布帖子</el-menu-item>
            <el-menu-item index="/manager/categories">分类管理</el-menu-item>
            <el-menu-item index="/manager/posts/drafts">草稿箱</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><Lock /></el-icon>
              <span>权限管理</span>
            </template>
            <el-menu-item index="/manager/roles">角色列表</el-menu-item>
            <el-menu-item index="/manager/permissions">权限列表</el-menu-item>
            <el-menu-item index="/manager/level-permissions">等级权限</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><Setting /></el-icon>
              <span>论坛管理</span>
            </template>
            <el-menu-item index="/manager/carousels">轮播图管理</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main>
        <RouterView />
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>

</style>